<style lang="less">
  .game {
    background: url('../assets/images/game-play-bg.jpg')no-repeat;
    background-size: 100%;
    .game-panel {
      z-index: 1;
      .score-warp {
        position: absolute;
        top: 20px;
        right: 20px;
        color: #fff;
      }
      .start-game {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 100px;
        width: 50%;
        height: auto;
      }
    }
  }
</style>

<template>
  <div class="game fixed-view">
    <div class="game-panel fixed-view" ref="gamePanel">
      <div class="score-warp">热力值：{{ score }}</div>
      <img v-if="!timer" class="start-game" src="@/assets/images/btn-start.png" @click="drawCanvas" />
    </div>
    <canvas id="game-canvas" ref="gameCanvas" :width="clientWidth" :height="clientHeight"></canvas>
  </div>
</template>

<script>
import { isMobile } from '@/utils/index'
import Vessel from '@/utils/game/Vessel'
import Material from '@/utils/game/Material'

export default {
  data() {
    return {
      clientWidth: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, // 视口宽
      clientHeight: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight, // 视口高
      time: 0, // 倒计时
      timer: null,  // 定时器
      bgRoll: 0,  // 背景滚动距离
      bgRollSpeed: 2, // 背景滚动速度
      score: 0, // 得分
      materialList: [], // 下落素质列表
      bgDistance: 0,  // 背景位置
      eventType: {
        start: 'touchstart',
        move: 'touchmove',
        end: 'touchend'
      },  // 事件类型
      vessel: null, // 容器
    }
  },
  methods: {
    // 绘画画布
    drawCanvas() {
      let canvas = this.$refs.gameCanvas
      let ctx = canvas.getContext('2d')
      this.setEventType()
      this.startGame(ctx)
    },
    // 游戏开始
    startGame(ctx) {
      this.vessel = new Vessel(this, ctx)
      this.vessel.operateVessel()
      this.resetGame()
      this.runGame(ctx)
    },
    // 非移动端事件
    setEventType() {
      if(isMobile()) return
      this.eventType = {
        start: 'mousedown',
        move: 'mousemove',
        end: 'mouseup'
      }
    },
    // 重置游戏
    resetGame() {
      this.materialList = []
      this.score = 0
      this.time = 0
      this.timer = null
    },
    // 运行游戏
    runGame(ctx) {
      ctx.clearRect(0, 0, this.clientWidth, this.clientHeight)
      this.countDown(ctx)
      this.vessel.initVessel()
      this.vessel.contactMelt(this.materialList)
      // 产生素材
      this.genorateMaterial()
      // 绘制素材
      for (let i = this.materialList.length - 1; i >= 0; i--) {
        const materialItem = this.materialList[i]
        if (!materialItem) break
        materialItem.paint(ctx)
        materialItem.move(ctx)
      }
      this.timer = setTimeout(() => {
        this.runGame(ctx)
      }, Math.round(1000 / 60))
      if (this.time > 2100) {
        this.stopGame(ctx)
        setTimeout(() => {
          // 结算分数
        }, 2000)
      } else {
        this.time++
      }
    },
    // 倒计时
    countDown(ctx) {
      ctx.font = '20px Georgia'
      ctx.fillStyle = 'white'
      ctx.fillText(parseInt(35 - this.time / 60), 25, 70)
    },
    // 生产素材
    genorateMaterial() {
      const genRate = 50  // 产生素材频率
      const random = Math.random()
      if (random * genRate > genRate - 1) {
        const marginLeft = Math.random() * (this.clientWidth - 50)
        const materialType = Math.floor(Math.random() * 2) // 素材类型
        const materialId = this.materialList.length
        const material = new Material(this, materialType, marginLeft, materialId)
        this.materialList.push(material)
      }
    },
    // 结束游戏
    stopGame(ctx) {
      ctx.clearRect(0, 0, this.clientWidth, this.clientHeight)
      clearTimeout(this.timer)
      this.timer = null
      let flag = confirm('游戏结束, 是否重新开始?')
      if (flag) this.startGame(ctx)
    }
  }
}
</script>
